<template>
    <el-container class="chat-layout">
        <!-- 使用公共侧边栏组件 -->
        <CommonSidebar />

        <!-- 主要内容区 -->
        <el-main class="main-content">
            <div class="chat-container" ref="chatContainer">
                <div class="message-list">
                    <div v-for="(msg, index) in messages" :key="index"
                        :class="['message', msg.type === 'user' ? 'user-message' : 'ai-message']">
                        <div class="message-avatar">
                            <el-avatar :size="40" :src="msg.type === 'user' ? userAvatar : aiAvatar" />
                        </div>
                        <div class="message-content">
                            <div class="message-text">{{ msg.content }}</div>
                            <div class="message-time">{{ msg.time }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="input-area">
                <el-input v-model="inputMessage" type="textarea" :rows="3" placeholder="输入您的问题..." resize="none"
                    @keyup.ctrl.enter="sendMessage" />
                <el-button type="primary" @click="sendMessage" :disabled="!inputMessage.trim()">
                    发送
                </el-button>
            </div>
        </el-main>
    </el-container>
</template>

<script setup>
import { ref } from 'vue'
import CommonSidebar from '@/components/CommonSidebar.vue'

const inputMessage = ref('')
const messages = ref([
    {
        type: 'ai',
        content: '你好！我是玲珑AI助手，很高兴为您服务。',
        time: '12:00'
    }
])

const userAvatar = 'path/to/user-avatar.jpg'
const aiAvatar = 'path/to/ai-avatar.jpg'

const sendMessage = () => {
    if (!inputMessage.value.trim()) return
    
    messages.value.push({
        type: 'user',
        content: inputMessage.value,
        time: new Date().toLocaleTimeString()
    })

    setTimeout(() => {
        messages.value.push({
            type: 'ai',
            content: '我收到了您的消息，正在思考回复...',
            time: new Date().toLocaleTimeString()
        })
    }, 1000)

    inputMessage.value = ''
}
</script>

<style scoped>
.chat-layout {
    height: 100vh;
}

.main-content {
    padding: 0;
    display: flex;
    flex-direction: column;
    background: #f5f7fa;
}

.chat-container {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.message {
    display: flex;
    margin-bottom: 20px;
    gap: 12px;
}

.message-content {
    max-width: 70%;
    background: #fff;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.ai-message .message-content {
    background: #ecf5ff;
}

.message-time {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

.input-area {
    padding: 20px;
    background: #fff;
    border-top: 1px solid #eee;
    display: flex;
    gap: 12px;
}

.input-area .el-input {
    flex: 1;
}

.input-area .el-button {
    align-self: flex-end;
}
</style>
